<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流布局</title>
    <link href="index.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="main">
    <div class="box">
        <div class="pic">
            <img src="img/0.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/0.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/S70118-122506.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/S70118-122506.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/S70118-122543.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/S70118-122506.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/640.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/800.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/136873613.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/S70118-122506.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/S70118-122543.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/800.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/136873613.jpg"/>
        </div>
    </div>
</div>
<script>
    window.onload=function(){
        waterfall('.main','.box');
        var dataInt={"data":[{"src":'img/0.jpg'},{"src":'img/0.jpg'}]};
        window.onscroll=function(){
            if(checkScrollSlide){
                var oParent=document.querySelector(".main")
                //将数据块渲染到页面尾部
                //第一步：遍历
                for(var i=0;i<dataInt.data.length;i++){
                    var oBox=document.createElement("div");
                    oBox.className="box";
                    oParent.appendChild(oBox);
                    var oPic=document.createElement("div");
                    oPic.appendChild(oPic);
                    var oImg=document.createElement("img");
                    oImg.src="img/"+dataInt.data[i].src;
                    oPic.appendChild(oImg);
                }
                waterfall('.main','.box');
            }

        }
    };
    function waterfall(parent,box){
        //将main下class为box取出来
        var oParent=document.querySelector(parent);
        var oBox=oParent.querySelectorAll(box);
        //计算列数
        var oBoxW=oBox[0].offsetWidth;
        var cols=Math.floor(document.documentElement.clientWidth/oBoxW);

        //设置main宽度
        oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto;'

        //设置位置了
        //第二行第一张图片要加在一行最矮的
        var hArr=[];
        for(var i=0;i<oBox.length;i++){
            if(i<cols){
                hArr.push(oBox[i].offsetHeight);
            }else{
                var minH=Math.min.apply(null,hArr);
                var minIndex=getMinIndex(minH,hArr);
                //改变盒子位置
                oBox[i].style.position='absolute';
                oBox[i].style.top=minH+'px';
                //oBox[i].style.left=oBox[minIndex].offsetHeight+'px';
                oBox[i].style.left=oBoxW*minIndex+'px';
                hArr[minIndex]+=oBox[i].offsetHeight;
            }
        }
    }
    function getMinIndex(minH,hArr){
        for(var i=0;i<hArr.length;i++){
            if(minH===hArr[i]){
                console.log(i);
                return i;
            }
        }
    }
    //检测是否达到滚动条件
    function checkScrollSlide() {
        var oParent = document.querySelector(".main");
        var oBox = document.querySelectorAll(".box");
        var lastBoxH = oBox[oBox.length - 1].offsetTop + Math.floor(oBox[oBox.length - 1].offsetHeight / 2);
        //滚动条高度
        var scrollTop = document.body.scrollTop || documen.documentElement.scrollTop;
        //可视区高度
        var height = document.body.clientHeight || document.documentElement.clientHeight;
        return lastBoxH<(scrollTop+height) ? true : false;
    }
</script>
</body>
</html>